<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jstree basic demos</title>
	<link href="metro-bootstrap.css" rel="stylesheet">
	 <script src="//code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js" type="text/javascript"></script>
    
    <script src="metro.min.js"></script>
	<script src="metro-treeview.js"></script>	
</head>
<body>
	<h1>DB Tree</h1>
	<div class="metro">
	<ul class="treeview" data-role="treeview">
    <li class="node" id="node">
        <a href="#"><span class="node-toggle"></span>sergey@pimenov.com.ua</a>
        <ul>
            <li><a class="testButton" href="#">Inbox</a></li>
            <li><a href="#">Outbox</a></li>
            <li><a href="#">Drafts</a></li>
            <li><a href="#">Rss-channels</a></li>
            <li><a href="#">Trash <span class="value">[5]</span></a></li>
            <li class="node">
                <a href="#"><span class="node-toggle"></span>subnode</a>
                <ul>
                    <li><a href="#">Inbox</a></li>
                    <li><a href="#">Outbox</a></li>
                    <li><a href="#">Drafts</a></li>
                    <li><a href="#">Rss-channels</a></li>
                    <li><a href="#">Trash</a></li>
                </ul>
            </li>
        </ul>
    </li>
 
    <li class="node collapsed">
        <a href="#"><span class="node-toggle"></span>info@metroui.net</a>
        <ul>
            <li><a href="#">Inbox</a></li>
            <li><a href="#">Outbox</a></li>
            <li><a href="#">Drafts</a></li>
            <li><a href="#">Rss-channels</a></li>
            <li><a href="#">Trash</a></li>
        </ul>
    </li>
	</ul>
	</div>
	<script type="text/javascript">
	

    
	
	</script>
</body>
</html>